<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>记账本</title>
<style type="text/css">
table {
	border-collapse: collapse;
	width: 50%;
}

table td, table th {
	border: 1px solid #cad9ea;
	color: #666;
	height: 30px;
}

table th {
	background-color: #CCE8EB;
	width: 100px;
	font-weight: bold;
}

table tr:nth-child(odd) {
	background: #fff;
}

table tr:nth-child(even) {
	background: #F5FAFA;
}
</style>
</head>
<body>
	<h2>记账本</h2>
	<p th:text="'用户：' + ${accountid}" />
	<p th:text="'资产：' + ${assets}" />
	<p th:text="'负债：' + ${liabilities}" />
	<p th:text="'目标：' + ${hope}" />
	<p th:text="'当月结余(资产-当月(包含)之前所有负债)：' + ${left}" />
	<a th:href="@{/addbookweb}">添加收支</a>&nbsp; &nbsp;
	<a th:href="@{/liabilities?statu=}">查看债务</a>
	<br>
	<br>
	<form th:action="@{/accountbook2}" method="post">
		<div class="form-group">
			<label>起始日</label> <input name="begindate" type="date"
				class="form-control date-picker" />
		</div>
		<div class="form-group">
			<label>结束日</label> <input name="enddate" type="date"
				class="form-control date-picker" />
		</div>
		<button type="submit" class="btn btn-primary">查询</button>
	</form>
	<div>
		<table xss=removed class="table">
			<tr>
				<td>ID</td>
				<td>标签</td>
				<td>标签名</td>
				<td>金额</td>
				<td>收支</td>
				<td>记账日</td>
				<td>摘要</td>
				<td>操作</td>
			</tr>
			<tr th:each="ab,memberStat:${accountBooks}">
				<td th:text="${ab.id}" />
				<td th:text="${ab.tag}" />
				<td th:text="${ab.tagname}" />
				<td th:text="${ab.amount}" />
				<td th:text="${ab.dc}" />
				<td th:text="${ab.acountdate}" />
				<td th:text="${ab.memo}" />
				<td><a th:href="@{/delbook(id=${ab.id})}">删除</a></td>
			</tr>
		</table>
	</div>
	<script>
	var defaultDate = document.querySelectorAll('.date-picker');
	for (var i = 0; i < defaultDate.length; i++) {
	    defaultDate[i].valueAsDate = new Date();
	}
    </script>
</body>
</html>